<!DOCTYPE HTML>
<html>
 <head>
  <title> 雷达图</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
    
    <div class="container">
      <div class="row">
        <h2>雷达图</h2>
        <div class="span24" id="canvas"></div>
      </div>
    

    <div class="row">
      <div class="span8">
        <h2>简介</h2>
        <p>这里仅仅是介绍最简单的雷达图使用，包括：</p>
        <ol>
          <li>创建雷达图</li>
          <li>声明标题、雷达图配置项，坐标轴</li>
          <li>plotCfg声明边框、tooltip格式化</li>
        </ol>
        <p>更多的雷达图示例请参考：<a href="http://builive.com/chart/radar.php">雷达图demo</a></p>
      </div>
      <div class="span16">
        <h2>代码</h2>
        <pre class="prettyprint linenums">
BUI.use('bui/chart',function (Chart) {
  
  var chart = new Chart.Chart({
          render : '#canvas',
          width : 950,
          height : 500,
          plotCfg : {
            margin : [50,50,100]
            
          },
          title : {
            text : '折线雷达图',
            'font-size' : '16px'
          },
          subTitle : {
            text : 'Source: WorldClimate.com'
          },
          xAxis : {
            type : 'circle',
            tickInterval : 45
          },
          yAxis : {
            title : null,
            type : 'radius',
            grid : {
              type : 'circle' //圆形栅格，可以改成polygon
            },
            labels : {
              label : {
                x : -12
              }
            },
            min : 0
          },  
         
          series: [
            { 
                name : 'line1',
                type: 'line',
                data: [8, 7, 6, 5, 4, 3, 2, 1]
            },
            {
                type: 'line',
                name: 'Line2',
                data: [1, 2, 3, 4, 5, 6, 7, 8]
            }, {
                type: 'line',
                name: 'line3',
                data: [1, 8, 2, 7, 3, 6, 4, 5]
            }
            ]
        });
 
        chart.render();
    });
 
        </pre>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>

  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');

    BUI.use('bui/chart',function (Chart) {
      
        var chart = new Chart.Chart({
          render : '#canvas',
          width : 950,
          height : 500,
          plotCfg : {
            margin : [50,50,100]
            
          },
          title : {
            text : '折线雷达图',
            'font-size' : '16px'
          },
          subTitle : {
            text : 'Source: WorldClimate.com'
          },
          xAxis : {
            type : 'circle',
            tickInterval : 45
          },
          yAxis : {
            title : null,
            type : 'radius',
            grid : {
              type : 'circle' //圆形栅格，可以改成polygon
            },
            labels : {
              label : {
                x : -12
              }
            },
            min : 0
          },  
         
          series: [
            { 
                name : 'line1',
                type: 'line',
                data: [8, 7, 6, 5, 4, 3, 2, 1]
            },
            {
                type: 'line',
                name: 'Line2',
                data: [1, 2, 3, 4, 5, 6, 7, 8]
            }, {
                type: 'line',
                name: 'line3',
                data: [1, 8, 2, 7, 3, 6, 4, 5]
            }
            ]
        });
 
        chart.render();
    });

  </script>
  
  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    //$(function () {
      prettyPrint();
    //});
  </script>  

<body>
</html>  